<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta charset="utf-8" />
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="http://cdn.bootcss.com/socket.io/1.3.5/socket.io.js"></script>
</head>

<body>
    <div id="box" style="max-width:700px;margin:0 auto;">
        <div class="input-group">
            <input type="text" class="form-control" id="in" placeholder="直播间名称?" aria-describedby="basic-addon2">
            <span class="input-group-addon" id="basic-addon2" style="cursor:pointer;">创建</span>
        </div>
    </div>
</body>
<script>
    $(document).ready(function () {
        window.username = 'others';
        var wsServer = 'ws://192.168.3.138:9504';
        var websocket = new WebSocket(wsServer);

        websocket.onopen = function (evt) {
            console.log("Connected to WebSocket server.");
            $("#model").modal('show');
        };


        websocket.onmessage = function (evt) {
            console.log('Retrieved data from server: ' + evt.data);
            $(".panel-body").append(evt.data);
            //$(".panel-body").append('<p><span style="color:#177bbb">'+evt.data.username+'</span> <span style="color:#aaaaaa">('+evt.data.time+')</span>: '+evt.data.msg+'</p>');
            var body = document.getElementById("body");
            body.scrollTop = body.scrollHeight;
            $("#in").focus();

        };


        $("#basic-addon2").click(function () {
            var msg = $("#in").val();
            websocket.send(msg);
            $("#in").val('');
        });

        $("#basic-addon3").click(function () {
            window.username = $("#name").val();
            websocket.send("login|@|" + window.username);
            $("#model").modal('hide');
        });



    });
</script>

</html>